<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" >
      <div style="font-family: 'Avenir';font-size: 20px;margin: 17px 0 0 15px;width: 10%;display: flex" @click="fanhui"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 80%;"  >{{$t('main.Feedback')}}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 17px 0 0 15px;width: 10%;display: flex" @click="fanhui"></div>
    </div>
    <div class="big">
      <div class="one" >
        意见类型
      </div>
      <div class="tow">
        <van-button class="tow1" v-if="open1" @click="buttonOpen1" plain>App建议</van-button>
        <van-button class="tow2" v-if="!open1" @click="buttonOpen1" plain>App建议</van-button>
        <van-button class="tow1" v-if="open2"  @click="buttonOpen2" plain>活动建议</van-button>
        <van-button class="tow2" v-if="!open2"  @click="buttonOpen2" plain>活动建议</van-button>
        <van-button class="tow1" v-if="open3" @click="buttonOpen3" plain>其他</van-button>
        <van-button class="tow2" v-if="!open3" @click="buttonOpen3" plain>其他</van-button>
      </div>
      <div class="three">
        <van-field
            class="three1"
            v-model="FeebacK.feedbackContent"
            rows="2"
            autosize
            type="textarea"
            placeholder="请留下您的宝贵意见或建议"
            show-word-limit
        />
      </div>
      <div class="four">
        <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="3" />
      </div>
    </div>
    <div class="big2" >
      <div style="font-size: 17px;margin: 15px 0 0 17px;width: 80%;height: 28%;display: flex">
        联系方式</div>
      <div class="five">
        <P style="margin-left: 20px; font-weight: bold ">+86</P>
        <P style="margin-left: 10px; font-weight: bold">{{this.xphone}}</P>
      </div>
    </div>
    <van-button type="primary" style="width: 80%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 20px; border-radius:50px;" @click="submit">提交</van-button>
  </div>
</template>

<script>
import {add,file} from "@/api/SetUp/feedback/feedback"

export default {
  data() {
    return {
      fileList: [],
      imgsList:[],
      message:'',
      open1:false,
      open2:true,
      open3:true,
      checked: true,
      xphone:'',
      FeebacK:{

      },

      imgs:null,
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.phoneXing();
    this.FeebacK.questionType=1
  },
  methods: {

    submit(){
      const uploadPromises = this.fileList.map(item => {
        const forms = new FormData();
        forms.append("file", item.file);
        return file(forms).then(row => {
          this.imgsList.push(row.data);
        });
      });
      Promise.all(uploadPromises).then(() => {
        this.FeebacK.feedbackPerson=this.user.name
        this.FeebacK.phone=this.user.phone
        this.FeebacK.registerIp=this.user.registerIp
        this.FeebacK.imgsList=this.imgsList
        console.log(this.FeebacK.imgsList)
        this.FeebacK.imgsList.forEach(item=>{
          if(this.imgs==null){
            this.imgs=item;
          }else{
            this.imgs=this.imgs+','+item;
          }
        })
        this.FeebacK.imgs=this.imgs
        add(this.FeebacK).then(row => {
          this.$toast('提交成功');
          this.$router.push("/myFeedback")
        })
      });
    },
    myFeedback(){
      this.$router.push("/myFeedback")
    },
    phoneXing(){
      this.xphone=this.user.phone.substring(0,3)+'****'+this.user.phone.substring(7,11);
    },
    buttonOpen1(){
      if(this.open1==true){
        this.open1=false;
        this.open2=true;
        this.open3=true;
        this.FeebacK.questionType=1
      }else{
        this.open1=true;
      }
    },
    buttonOpen2(){
      if(this.open2==true){
        this.open2=false;
        this.open1=true;
        this.open3=true;
        this.FeebacK.questionType=2
      }else{
        this.open2=true;
      }
    },
    buttonOpen3(){
      if(this.open3==true){
        this.open3=false;
        this.open2=true;
        this.open1=true;
        this.FeebacK.questionType=3
      }else{
        this.open3=true;
      }
    },
    fanhui() {
      this.$router.push('/setUp')
    },
  }
}

</script>

<style scoped>
.big {
  width: 100%;
  height: 420px;
  background: white;
  margin-top: 15px;
}
.one{
  width: 90%;
  margin: 10px 0 0 12px ;
  display: flex;
  padding-top: 10px;
  font-size: 17px;
}
.tow{
  width: 100%;
  margin: 15px 0 0 10px ;
  display: flex;
}
.tow1{
  width: 30%;
  height: 38px;
  color: black;
  background: whitesmoke;
  margin-right: 10px;
  border-radius: 5px;
}
.tow2 {
  width: 30%;
  height: 38px;
  color: #51b8ff;
  margin-right: 10px;
  border-radius: 5px;
  background-color: rgba(135, 206, 235, 0.2);
  border: #51b8ff 1px solid;
}
.three{
  width: 95%;
  height: 200px;
  margin: 10px 0 0 11px;
  border-top: whitesmoke 2px solid;
}
.three1{
  width: 100%;
  height: 100%;
}
.four{
  width: 95%;
  height: 100px;
  display: flex;
  margin: 10px 0 0 11px;
}
.big2{
  width: 99%;
  height: 105px;
  margin-top: 15px;
  background: white;
  padding-top: 1px;
}
.five{
  width: 93%;
  height: 40px;
  background: whitesmoke;
  margin-left: 15px;
  border-radius: 10px;
  display: flex;
  line-height: 10px;
}
</style>
